<template>
 <div id="home">
      <tab-control :title="['流行','新款','精选']" @itemclick="itemclick" ref="tabcontrol2" class="tabcontrol2" v-show="showtab"></tab-control>
     <div class="homenav"><navbar><div slot="center">购物街</div></navbar></div>
     <scroll class="wrapper" ref="scroll" :currentprobetype="2" @showback="showback" @pullupload="loadMore" @showtabcontrol="showtabcontrol">
      <homeswiper :banners="banners" @swiperload = "swiperload" ref="homeswiper"></homeswiper>
      <recommendview :recommend="recommend"></recommendview>
      <featureview/>
      <tab-control :title="['流行','新款','精选']" @itemclick="itemclick" ref="tabcontrol1"></tab-control>
     <goods-list :goods="showgoods"/>
     </scroll>
     <backtotop @click.native="backtotop" v-show="isshow" />


 </div>

</template>

<script>
  import navbar from "../../components/common/navbar/Navbar.vue"
  import TabControl from "../../components/content/TabControl/TabControl.vue"
  import scroll from "../../components/common/scroll/scroll.vue"
  import backtotop from "../../components/common/backtotop/backtotop.vue"

  import homeswiper from "./childComps/homeswiper.vue"
  import recommendview from "./childComps/recommendview.vue"
  import featureview from "./childComps/featureview.vue"
  import GoodsList from "../../components/content/goods/GoodsList/GoodsList.vue"
  import {itemimglistener} from "../../common/itemimglistener/itemimglistener.js"

  import {homeMultidata,getHomeGoods} from "../../network/home.js"
  import {debounce} from "../../common/utils/utils.js"

  export default{
    components:{
      TabControl,
      navbar,
      scroll,
      backtotop,
      homeswiper,
      recommendview,
      featureview,
      GoodsList
    },
    data(){
      return{
        banners:[],
        recommend:[],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]},
        },
        // 当前类型
        currenttype:'pop',
        // 是否显示回到顶部按钮
        isshow:false,
        // tab-control到顶部的距离
        totabheight:0,
        // 是否显示tab-control
        showtab:false,
        // 记录滚动的位置
        saveY:0,

      }
    },
    computed:{
      showgoods(){
        return this.goods[this.currenttype].list
      },


    },
    methods:{
      // 事件相关方法：
      itemclick(index){
        switch(index)
        {
          case 0:
          this.currenttype = 'pop'
          break
          case 1:
          this.currenttype = 'new'
          break
          case 2:
          this.currenttype = 'sell'
        }
        this.$refs.tabcontrol1.currentindex = index
        this.$refs.tabcontrol2.currentindex = index
      },
      swiperload(){
        this.totabheight = this.$refs.tabcontrol1.$el.offsetTop

      },
      showtabcontrol(position){
        this.showtab = (-position.y) > this.totabheight
      },
      backtotop(){
        this.$refs.scroll.backtotop(0,0,500)
      },
      showback(position){
          this.isshow = (-position.y)>1000
      },
      loadMore(){
        this.getHomeGoods(this.currenttype)
        this.$refs.scroll.scroll.refresh()

      },
      // 网络请求相关的方法：
      gethomeMultidata(){
        homeMultidata().then(res=>{
          console.log(res)
          this.banners = res.data.banner.list
          this.recommend = res.data.recommend.list
        })
      },
      getHomeGoods(type){
        const page = this.goods[type].page +1
        getHomeGoods(type,page).then(res=>{
          // console.log(res)
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1
          this.$refs.scroll.finishpullUp()
        })
      }
    },
    created() {
      // 1.请求轮播图和推荐的数据
      this.gethomeMultidata()
      // 请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    mixins:[itemimglistener],
    // mounted() {
    //   // 防抖函数
    //   const refresh = debounce(this.$refs.scroll.refresh)
    //   this.$bus.$on('imgLoad',()=>{
    //     refresh()
    //   })
    // }
    activated(){
      this.$refs.scroll.scrollTo(0,this.saveY,0)
      this.$refs.scroll.refresh()
    },
    deactivated(){
      this.saveY = this.$refs.scroll.getY()
    }
  }
</script>

<style scoped="scoped">
  @import url("../../assets/css/base.css");
  #home{
    padding-top: 44px;
    /* padding-bottom: 49px; */
    height: 100vh;
    position: relative;
  }
  .tabcontrol2{
    position: relative;
    z-index: 9;
  }
  .wrapper{
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;

  }
  .homenav{
   font-weight: 600;
   background: pink;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index:9;
  }
</style>
